<template>
  <div class="">
    <h1>这是watch页面</h1>
    <h1>{{ num }}</h1>
    <button @click="num++">num++</button>

    <h2>{{ obj.name }}</h2>
    <button @click="obj.name = '小红'">改变小明</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1,
      obj: {
        name: "小明",
      },
    };
  },
  mounted() {},
  methods: {},
  components: {},
  watch: {
    // num: {
    //   handler(newval, oldval) {
    //     console.log(newval, oldval);
    //   },
    //   //执行函数 当num发生改变的时候触发的监听函数，有两个值 新值和旧值
    //   deep: false,
    //   //深度监听，当要监听的值是一个对象里的值的时候 需要用到深度监听
    //   immediate: false,
    //   //立刻监听，是否一进入页面就执行一次监听，默认值是false
    // },
    //    完整写法： 每一个watch都由三个参数

    obj: {
      handler(newval, oldval) {
        console.log(newval, oldval);
      },
      immediate: true,
      deep: true,
      //deep开启深度监听，要监听的是一个复杂数据类型的时候需要开启，默认值是false
    },

    // watch可以简写 有的时候我们只需要handler监听函数不需要immediate和deep时就可以简写
    num(newval) {
      console.log(newval);
    },
  },
};
</script>

<style lang="scss"></style>
